<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col">
				<text class="text_1">{{type.ordersTypeStr}}</text>
				<view class="flex-col section_1">
					<text class="text_2">{{type.serviceName}}</text>
					<view class="flex-col group_2">
						<text class="text_3">评价</text>
						<view class="flex-row group_3">
							<view class="flex-col items-center text-wrapper" @click="tabclick(0)"
								:class="clickT ==0?'activeT':''"><text class="text_4">非常满意</text></view>
							<view class="flex-col items-center text-wrapper_1" @click="tabclick(1)"
								:class="clickT ==1?'activeT':''"><text class="text_5">满意</text></view>
							<view class="flex-col items-center text-wrapper_1 view_1" @click="tabclick(2)"
								:class="clickT ==2?'activeT':''"><text class="text_5">一般</text></view>
							<view class="flex-col items-center text-wrapper_1" @click="tabclick(3)"
								:class="clickT ==3?'activeT':''"><text class="text_5">不满意</text></view>
						</view>
						<view class="flex-col items-start text-wrapper_2">
							<textarea name="" id="" cols="30" rows="10" placeholder="请输入您的评价"
								v-model="evaluateCon"></textarea>
							<!-- <text class="text_9">请输入您的评价</text> -->
						</view>
						<view class="flex-row group_4">
							<text class="text_10">添加照片</text>
							<text class="text_11">最多可上传9张</text>
						</view>
						<view class="flex-row ">
							 <shop-upload :maxCount="9" :fileList="fileList" @del="delectPic" @success='success'></shop-upload>
						</view>
						<!-- <text class="text_12">匿名评价</text> -->
						<view style="margin-top: 30rpx;">
							<u-checkbox-group  placement="column" @change="checkboxChange">
								<u-checkbox v-model="checked" shape="circle" label="匿名评价" size='16px' labelSize='14px' iconSize='16px'></u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col items-center button" @click="submit"><text class="text_13">提交</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				detailsId: '',
				serviceType:0,
				evaluateCon: '',
				clickT: 0,
				checked:false,
				fileList: [],
				orderid:0,
				type:{}
			};
		},
		onLoad(option) {
			// console.log(option);
			this.detailsId = option.id;
			this.orderid = option.orderid;
			this.serviceType=option.serviceType;
			this.queryWholeServiceType(this.serviceType,this.orderid);
		},
		methods: {
			queryWholeServiceType(serviceType,orderid){
				this.$http('lorder.queryWholeServiceType',{
					ordersId:orderid,
					serviceType:serviceType
				}).then(r=>{
					if(r.code==200)
					{
						this.type=r.data;
					}
				});
			},
			delectPic(index)
			{
				this.fileList.splice(index,1);
			},
			success(file)
			{
				this.fileList.push({url:file.url})
				console.log(this.fileList);
			},
			checkboxChange(n) {
				console.log('change', n);
				this.checked = !this.checked
				console.log(this.checked)
			},
			submit() {
				let checked;
				if(this.checked ==true){
					checked =1
				}else{
					checked = 2
				}
				// if(this.fileList.length==0)
				// {
				// 	this.$u.toast('请上传图片');
				// 	return;
				// }
				let arr=[];
				this.fileList.map(item=>{
					arr.push(item.url)
				})
				let overviewConstructionUrl=arr.join(",");
				this.$http('lorder.commentsService', {
					commentsDetails: this.evaluateCon,
					commentsLevel: this.clickT+1,
					commentsVisible: checked,
					detailsId: this.detailsId,
					serviceType:this.serviceType,
					commentsPictures:overviewConstructionUrl
				}).then(res => {
					if (res.code == 200) {
						uni.navigateTo({
							url: '/pages/my/order/order'
						})
					}
				}).catch(err => {

				})
			},
			tabclick(index) {
				this.clickT = index
			},
			
		},
	};
</script>

<style scoped lang="scss">
	.activeT {
		border: 1px solid #1d6aff;
		background-color: #fff;
	}

	.activeT text {
		color: #1d6aff;
	}

	.text-wrapper_2 textarea {
		font-size: 28rpx;
		padding-left: 10rpx;
	}

	.text-wrapper_1 {
		margin-left: 15rpx;
		flex: 1 1 152rpx;
		padding: 9rpx 0 19rpx;
		background-color: #f6f7f9;
		border-radius: 28rpx;
		height: 56rpx;
	}

	.text_5 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding: 30rpx 24rpx 64rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.button {
		margin: 118rpx 8rpx 0;
		padding: 19rpx 0 31rpx;
		background-color: #1d6aff;
		border-radius: 44rpx;
	}

	.text_1 {
		align-self: flex-start;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.section_1 {
		margin-top: 34rpx;
		padding: 30rpx 24rpx 0;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.text_13 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_2 {
		align-self: flex-start;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_2 {
		margin-top: 40rpx;
		padding: 31rpx 0 39rpx;
		border-top: solid 1rpx #eeeeee;
	}

	.text_3 {
		align-self: flex-start;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_3 {
		margin-top: 33rpx;
	}

	.text-wrapper_2 {
		margin-top: 32rpx;
		padding: 22rpx 0;
		background-color: #f6f7f9;
		border-radius: 16rpx;
	}

	.group_4 {
		padding: 30rpx 0 33rpx;
	}

	.image-wrapper {
		padding: 54.5rpx 0;
		align-self: flex-start;
		border-radius: 16rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836702818966983.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 156rpx;
	}

	.text_12 {
		margin-left: 44rpx;
		margin-top: 29rpx;
		align-self: flex-start;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text-wrapper {
		padding: 9rpx 0 19rpx;
		flex: 1 1 152rpx;
		border-radius: 28rpx;
		background-color: #f6f7f9;
		/* background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836691545194809.png');
    background-position: 0% 0%;
    background-size: 100% 100%;
    background-repeat: no-repeat; */
		height: 56rpx;
	}

	.view_1 {
		margin-left: 16rpx;
	}

	.text_9 {
		margin-left: 26rpx;
		color: #bfbfbf;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_10 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_11 {
		margin: 4rpx 0 3rpx 15rpx;
		color: #999999;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.image_1 {
		width: 47rpx;
		height: 47rpx;
	}

	.text_4 {
		color: #333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}
</style>
